<template>
    <el-container class="container">
        <div class="container_div">
            <el-aside :class="[show==true?'container_aside':'container_asidetwo']">
                <div class="left_content">
                    <span class="left_content_name">{{form.name}}</span>
                    <div class="left_content_itemBgColor" v-for="item in meData" @click="meDataclick(item)">
                        <div :class="[meTabTitle == item.title?'left_content_item_headerChoose':'left_content_item_header']">
                            <i :class="item.icon" class="iconfont left_content_item_header_icon"></i>
                        </div>
                        <span :class="[meTabTitle == item.title?'left_content_item_titleChoose':'left_content_item_title']">{{ item.title }}</span>
                    </div>
                </div>
            </el-aside>
            <div :class="[show==false?'container_aside_rightTwo':'container_aside_right']" @mouseenter="changmouseenter" @mouseleave=mouseleavechang>
                <div class="container_aside_right_text" v-if="!show" @click="projectclick">{{form.name?form.name:""}}</div>
                <div class="narrow" @click="show = !show" v-show="asideright==true" v-if="show">
                    <a style="width: 100%">
                        <div class="left_css">
                            <i :class="[show ?'el-icon-caret-left':'el-icon-caret-right']"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div :class="[meComponents=='knowledge'?'right_contentTwo':'right_content']">
            <!--
           componentType : 用于区分是否为任务组件
           resetForm：进行组件切换
           membershow：是否为成员组件
           tabType：甘特图按钮事件

          -->
            <component :is="meComponents" :docForm1="docForm" ref="projComponents" :form='form' taskMinHeight="calc(100vh - 122px)" :componentType='componentType' @resetForm="resetForm" @tabType='tabType' @queryByIdclic='queryByIdclic' :membershow='membershow' @memberchange="memberchange" :projId="projectId"></component>
        </div>
    </el-container>
</template>
<script>
import Cookies from "js-cookie";
import overview from "./components/overview";
import milepost from "../../app/milepost/list";
import warehouse from "../../app/git/list";
import task from "../../app/task/index";
import member from "./components/member";
import contract from "./components/contract";
import contractAdd from "./components/contractAdd";
import knowledge from "./components/knowledge";
import projchange from "./components/projchange";
import changerecord from "./components/changerecord";
import mail from "./components/mail";
import meeting from "./components/meeting";
import utils from "@/utils/utils";
import { mapGetters } from "vuex";
import { queryById } from "@/api/project";
import permissionFunc from "@/utils/permission";
export default {
    name: "projectDetails",
    components: {
        overview,
        milepost,
        task,
        warehouse,
        member,
        knowledge,
        contract,
        contractAdd,
        projchange,
        mail,
        meeting,
        changerecord,
    },
    watch: {
        $route(newVal, oldVal) {
            console.log(newVal);
            if (
                newVal.name == "projectdetails" &&
                newVal.query.id != this.form.id
            ) {
                this.form.id = newVal.query.id;
                this.queryByIdclic();
            }
        },
    },
    data() {
        return {
            form: {},
            projectId: "",
            componentType: "task",
            show: true,
            meTabTitle: "概览",
            meComponents: "overview",
            membershow: false,
            asideright: false,
            current: 1,
            size: 20,
            total: 0,
            meData: [
                { icon: "icon-gailan1", title: "概览", component: "overview" },
                { icon: "icon-renwu", title: "任务", component: "task" },
                {
                    icon: "icon-milestone",
                    title: "里程碑",
                    component: "milepost",
                },
                {
                    icon: "icon-zhishiku",
                    title: "项目文件",
                    component: "knowledge",
                },
                { icon: "icon-hetong", title: "合同", component: "contract" },
                { icon: "icon-youxiang", title: "邮件", component: "mail" },
                {
                    icon: "icon-huiyijiyao",
                    title: "会议纪要",
                    component: "meeting",
                },
                { icon: "icon-chengyuan", title: "成员", component: "member" },
                {
                    icon: "icon-cangku",
                    title: "代码仓库",
                    component: "warehouse",
                },
                {
                    icon: "icon-biangeng",
                    title: "变更",
                    component: "changerecord",
                },
                {
                    icon: "icon-biangeng",
                    title: "使用记录",
                    component: "projchange",
                },
            ],
            times: null,
            docForm: {
                docType: "",
                dirId: "",
                docTypeId: "",
            },
        };
    },
    created() {
        this.projectId = this.$route.query.id;
        this.queryByIdclic();
        if (!this.permissionQuery()) {
            this.meData.splice(4, 1);
        }
        if (!utils.isNull(Cookies.get("meTabTitle"))) {
            this.meTabTitle = Cookies.get("meTabTitle");
        } else {
            this.meTabTitle = "概览";
        }
        if (!utils.isNull(Cookies.get("meComponents"))) {
            this.meComponents = Cookies.get("meComponents");
        } else {
            this.meComponents = "overview";
        }
        this.$EventBus.$on("projectEdit", () => {
            this.projectId = this.$route.query.id;
            this.queryByIdclic();
        });
        this.$EventBus.$on("ProjApply", () => {
            this.projectId = this.$route.query.id;
            this.queryByIdclic();
        });
    },
    methods: {
        permissionQuery() {
            return permissionFunc.inserted(["app:contract:index"]);
        },
        //获取项目详情
        async queryByIdclic() {
            let res = await queryById({ id: this.projectId }, false);
            this.form = res.data;
        },
        tabType(data) {
            this.show = data;
        },
        resetForm(data, item) {
            var _this = this;
            if (data == "member") {
                this.membershow = true;
            }
            if (data == "contractAdd" || data == "contract") {
                this.docForm.docType = "05";
                this.docForm.dirId = this.form.dirId;
                this.docForm.docTypeId = this.$route.query.id;
                Cookies.remove("meTabTitle");
                Cookies.set("meTabTitle", item);
                this.meTabTitle = Cookies.get("meTabTitle");
                Cookies.remove("meComponents");
                Cookies.set("meComponents", data);
                this.meComponents = Cookies.get("meComponents");
            } else {
                this.meComponents = data;
                this.meTabTitle = item;
            }
        },
        memberchange() {
            this.membershow = false;
        },
        projectclick() {
            this.show = true;
        },
        mouseleavechang() {
            this.asideright = false;
        },
        changmouseenter() {
            this.asideright = true;
        },
        meDataclick(data) {
            Cookies.remove("meTabTitle");
            Cookies.set("meTabTitle", data.title);
            this.meTabTitle = Cookies.get("meTabTitle");
            Cookies.remove("meComponents");
            Cookies.set("meComponents", data.component);
            this.meComponents = Cookies.get("meComponents");
        },
    },
};
</script>
 <style scoped>
.container {
    /* height: 88vh; */
}
.container_div {
    display: flex;
    height: calc(100vh - 84px);
}
.container_aside_right {
    width: 30px;
    position: relative;
}
.container_aside_rightTwo {
    width: 30px;
    position: relative;
    border-right: solid 1px rgb(229, 236, 240);
}

.container_aside {
    width: 220px !important;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 0 0 12px 2px rgb(0 0 0 / 12%);
    transition: all 0.5s;
    overflow: auto;
}
.container_asidetwo {
    width: 3px !important;
    height: 100vh;
    background-color: #ffffff;
    overflow: auto;
    transition: all 0.5s;
}
.left_content {
    width: 220px;
    /*height: 100vh;*/
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    padding-left: 32px;
    padding-bottom: 20px;
    /*overflow-y: hidden;*/
    transition: all 0.5s;
}
.left_content_name {
    font-size: 20px;
    color: rgb(46, 64, 94);
    font-weight: 700;
    line-height: 28px;
}
.left_content_itemBgColor {
    height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.left_content_itemBgColorChoose {
    height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgb(44, 126, 248);
}
.left_content_item_title {
    font-size: 13px;
    font-weight: 500;
    margin-left: 10px;
}
.left_content_item_titleChoose {
    font-size: 13px;
    font-weight: 500;
    margin-left: 10px;
    color: rgb(44, 126, 248);
}
.left_content_item_headerChoose {
    color: rgb(44, 126, 248);
    font-size: 13px;
    font-weight: 500;
}
.left_content_item_header_icon {
    font-size: 18px;
}

.narrow {
    cursor: pointer;
    position: absolute;
    top: 40%;
    right: 20px;
    z-index: 50;
    display: flex;
    align-items: center;
}
.left_css {
    width: 10px;
    height: 50px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #999999;
}
.container_aside_right_text {
    cursor: pointer;
    word-wrap: break-word;
    font-size: 18px;
    color: #909aaa;
    margin-top: 15px;
    margin-left: 2px;
    line-height: 35px;
    writing-mode: tb-rl;
    height: 100%;
    text-orientation: upright;
    letter-spacing: 1px;
    width: 30px;
}
.right_content {
    flex: 1;
    padding-top: 24px;
    padding-right: 14px;
    padding-left: 8px;
    height: calc(100vh - 84px);
    overflow-y: auto;
}
.right_contentTwo {
    flex: 1;
    overflow-y: auto;
}
</style>
